<script setup lang="ts">
import Edit from '../../components/edit/index.vue';
import Arithmetic from '@/views/Demand/components/arithmetic.vue';
import Craft from './dialog/craft/index.vue';
import { searchConfig } from './config/search-config';
import { tableConfig } from './config/table-config';
import { doGetScheduleList, doDelSchedule } from '@/api/demand/arithmetic/index';
import useCommon from '@/views/Demand/Arithmetic/hooks';
import type { OrderListRecord } from '@/api/demand/order/model/type';

// 表格组件Ref
const tableRef = ref<TableRef>();

const { priorityChange, jumpToMaterial, handleGetData, updateSelect } = useCommon(tableRef);

/**
 * @: 删除相关
 */
const selectIds = ref<number[]>([]);
const { rowDel } = useDelRow(tableRef, selectIds, doDelSchedule);

const searchRef = ref<SearchRef>();
const orderIds = ref<string[]>([]);
const handleSelection = (e: OrderListRecord[]) => {
    selectIds.value = e.map(item => item.id);
    orderIds.value = e.map(item => item.orderNumber);
};

/**
 * @: 修改相关
 */
const editRef = ref<InstanceType<typeof Edit>>();
const openEdit = (row: OrderListRecord) => {
    editRef.value?.handleEdit(row);
};

/**
 * @: 工艺弹框
 */
const craftRef = ref<InstanceType<typeof Craft>>();
const checkCraft = (row: OrderListRecord) => {
    if (!row.hasProcess) return;
    craftRef.value?.open(row);
};
/**
 * @: 打开计划运算进度条
 */
const arithmeticRef = ref<InstanceType<typeof Arithmetic>>();
const openArithmetic = (type: string) => {
    arithmeticRef.value?.open(type);
};
/**
 * @: 表格编辑禁用函数
 */
const editDisabledFn = (row: OrderListRecord) => row.schedulingStatus !== '未排产';
</script>

<template>
    <q-page class="arithmetic-page">
        <base-search ref="searchRef" :table-ref="tableRef" :searchConfig="searchConfig" />

        <base-table
            ref="tableRef"
            action-width="180"
            :tableConfig="tableConfig"
            :getDataFn="doGetScheduleList"
            :editDisabledFn="editDisabledFn"
            :added-params="{ schedulingStatus: 'NOTARRANGED' }"
            @selection-change="handleSelection"
            @edit="openEdit"
            @del="rowDel"
        >
            <template #tableHeadEnd>
                <div>
                    <el-button class="m-r-16" @click="openArithmetic('ALL_OPERATION')">
                        全部运算
                    </el-button>
                </div>
            </template>
            <!-- 物料编码 -->
            <template #itemCode="{ row }">
                <span class="link" @click="jumpToMaterial(row.itemCode)">
                    {{ row.itemCode }}
                </span>
            </template>

            <!-- 订单优先级 -->
            <template #orderPriority="{ row }">
                <div>
                    <el-select
                        :model-value="row.orderPriority"
                        @change="val => priorityChange(val, row)"
                    >
                        <el-option v-for="item in 10" :key="item" :value="item" />
                    </el-select>
                </div>
            </template>

            <!-- 操作项 -->
            <template #action="{ row }">
                <span class="m-l-24" @click="checkCraft(row)">
                    <el-tooltip
                        v-if="!row.hasProcess"
                        content="当前订单物料未创建工艺路线"
                        placement="top"
                    >
                        <el-link class="relative" type="primary" disabled>
                            工艺
                            <q-icon icon-class="a-warning1" size="13" class-name="danger" />
                        </el-link>
                    </el-tooltip>
                    <el-link v-else type="primary"> 工艺 </el-link>
                </span>
            </template>
        </base-table>

        <!-- 编辑 -->
        <edit ref="editRef" :tableRef="tableRef" />

        <!-- 工艺弹框 -->
        <craft ref="craftRef" />
        <!-- 计划运算 -->
        <arithmetic
            ref="arithmeticRef"
            :ids="orderIds"
            @get-data="handleGetData"
            @update-select="updateSelect"
        />
    </q-page>
</template>

<style scoped lang="scss">
@include b(danger) {
    position: absolute;
    top: -1px;
    right: -8px;
}
@include b(relative) {
    position: relative;
}

:deep(.cell.el-tooltip) {
    &:has(.link) {
        color: var(--q-color-primary);
    }
}

@include b(link) {
    cursor: pointer;
}
</style>
